<template>
  <div class="table-page-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="system-user-search mb15">
        <el-form ref="searchFormRef" :model="searchForm" inline>
          <el-form-item label="下载用户" prop="username">
            <el-input v-model="searchForm.username" style="width: 200px"/>
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" @click="refresh">
              <el-icon>
                <ele-Search />
              </el-icon>
              查询
            </el-button>
            <el-button size="default" @click="onReset">
              <el-icon>
                <ele-RefreshRight />
              </el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData.list" border :style="{ width: '100%' }" :loading="loading">
        <el-table-column prop="username" label="下载用户" width="200"/>
        <el-table-column prop="docName" label="资料名称"  />
        <el-table-column prop="author" label="作者" width="200" />
        <el-table-column prop="downloadTime" label="下载时间" width="200" />
        <el-table-column prop="downloadBonus" label="使用积分" width="200"/>

      </el-table>
      <CommonPagination :pagination="pagination" :total="tableData.total"></CommonPagination>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import { useTable } from "/@/hooks/use-table";
import CommonPagination from '/@/components/common-pagination/index.vue';
import { readAllDownloadRecord } from "/@/api/record";
import { FormInstance } from "element-plus";


const searchFormRef = ref<FormInstance>();

const searchForm = reactive({
  username: undefined
})


const { tableData, pagination, loading, refresh, resetAndRefresh } = useTable<any>(({ page, pageSize }) =>

readAllDownloadRecord({ page, pageSize, ...searchForm }).then((data) => {
    return {
      list: data?.list,
      total: data?.total
    }
  })
)


const onReset = () => {
  searchFormRef.value?.resetFields();
  resetAndRefresh();
}



</script>
<style lang="scss" scoped></style>